<template>
	<view class="chooseWinecard">
		<n-loading></n-loading>
		<!-- 酒卡管理 -->
		<view class="cardManage">
			我的酒卡<text>共{{totalCount}}张</text>
			<text class="fr" @tap="manageGo" v-if="cardList.length!=0" :class="{screenEd:isManage==1}">{{isManage?'完成':'管理'}}</text>
		</view>
		<view class="liquorCardList" v-if="cardReady">
			<view v-if="cardReady">
				<view class="cardNo" v-if="cardList.length==0">
					<image src="../../static/svgIcon/noCard.svg" mode=""></image>
					<view class="tips">您还没有酒卡请前去获取酒卡~</view>
					<view class="getCardBtn" @tap="goHome">获取酒卡</view>
				</view>
				<view class="liquorCardEach" v-for="(item,index) of cardList" :key="index">
					<view class="chooseBox" v-if="isManage">
						<view class="checkbox" @tap="checkGo(index)">
							<u-icon name="checkmark" color="#FF5238" size="18" v-if="item.checkS"></u-icon>
						</view>
					</view>
					<view class="liquorCardEachCont2">
						<image class="liquorCardEachBj" :src="(item.specs).indexOf('500')!=-1?'https://lovebirdopen.com/static/img/cardStrategy/popCardAll500.png':'https://lovebirdopen.com/static/img/cardStrategy/popCardAll125.png'"></image>
						<view class="bigBox">
							<view class="worth" :class="{worthColor1:(item.specs).indexOf('500')!=-1,worthColor2:(item.specs).indexOf('125')!=-1}">
								价值￥{{item.price}}<text>存酒得高粱穗</text>
								<!-- <u-icon name="arrow-right" color="#755F3C" size="24" v-if="(item.specs).indexOf('500')!=-1"></u-icon>
								<u-icon name="arrow-right" color="#FFE6A6" size="24" v-if="(item.specs).indexOf('125')!=-1"></u-icon> -->
							</view>
							
							<view class="cardTit" :class="{color1:(item.specs).indexOf('500')!=-1,color2:(item.specs).indexOf('125')!=-1}">{{item.liquor_cate.name+item.liquor_cate.description}}</view>
							<view class="time mb56" :class="{color3:(item.specs).indexOf('500')!=-1,color4:(item.specs).indexOf('125')!=-1}">{{getdate(item.created_at,1)}}</view>
							<view class="time sTime" :class="{color3:(item.specs).indexOf('500')!=-1,color4:(item.specs).indexOf('125')!=-1}">
								<view class="info ellipsis">{{item.name}}</view><text>×{{item.num}}</text>
							</view>
							<view class="cardHandle">
								<view class="handleEach" :class="{handleEach11:(item.specs).indexOf('500')!=-1,handleEach21:(item.specs).indexOf('125')!=-1}" @tap="shareGo(item.id,item.name,item.image,index)" v-if="item.given==null">
									<view class="handleBox">
										<image :src="(item.specs).indexOf('500')!=-1?'../../static/img/share3.svg':'../../static/img/share4.svg'" mode=""></image>
										<text class="btnName1">赠送</text>
									</view>
								</view>
								<view class="handleEach handleEach2" :class="{handleEach12:(item.specs).indexOf('500')!=-1,handleEach22:(item.specs).indexOf('125')!=-1}">
									<view class="handleBox" @tap="seeCardInfo(1,item.id)">
										<image :src="(item.specs).indexOf('500')!=-1?'../../static/img/QRcode1.svg':'../../static/img/QRcode2.svg'" mode=""></image>
										<text>立即提货</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 按钮 -->
		<view class="okChoose" :style="{paddingBottom:isIphoneX?'76rpx':'',height:isIphoneX?'176rpx':'100rpx'}" v-if="cardList.length>0 && isManage">
			<view class="selectAll" @tap="selectAllGo">
				<view class="allCheckbox" :class="{allCheckboxEd:selectAll}">
					<u-icon name="checkmark" color="#fff" size="20"></u-icon>
				</view>
				<text>全选</text>
			</view>
			<view class="okBtn" @tap="okChoose">确认选择</view>
		</view>
		<!-- 分享 -->
		<u-popup v-model="shareWayShow" mode="bottom" border-radius="16">
			<view class="shareWaysBox">
				<view class="shareWays">
					<view class="shareWaysEach">
						<button class="shareFriendsBtn" open-type="share" :plain="true" @click="cancelShare">
							<view class="shareWaysEachIcon">
								<u-icon name="weixin-fill" color="#2DC100" size="48"></u-icon>
							</view>
							<view class="tit">微信好友分享</view>
						</button>
					</view>
					<view class="shareWaysEach" @tap="generateGo">
						<view class="shareWaysEachIcon">
							<u-icon name="photo-fill" color="#666666" size="48"></u-icon>
						</view>
						<view class="tit">生成海报</view>
					</view>
				</view>
				<!-- 取消 -->
				<view class="cancel" @tap="cancelShare">取消</view>
			</view>
		</u-popup>
		<u-popup v-model="painterShow" mode="bottom" border-radius="16">
			<view class="goodsPainter">
				<image :src="posterPath" mode="" v-if="posterPath!=''"></image>
			</view>
			<view class="savePainter">
				<view class="saveBtn" @tap="savePoster">保存图片</view>
			</view>
		</u-popup>
		
		<view class="painterCans">
			<lime-painter :board="cardPosterNew" v-if="isGenerate==1" :isRenderImage="true" @success="posterPath = $event" @fail=""></lime-painter>
		</view>
	</view>
</template>

<script>
	export default{
		data() {
			return {
				// 手机机型
				modelmes:null,
				isIphoneX:false,
				// 酒卡
				cardList:[],
				cardReady:null,
				isLoadMore:false,
				page: 1,
				pageSize: 10,
				scrollTop:0,
				isGenerate:0,
				giveCard:null,
				totalCount:0,
				// 分享
				giveCard:{},
				giveCardId:'',
				giveCardImg:'',
				giveCardName:'',
				giveCardVal:'',
				shareWayShow: false,
				painterShow: false,
				invitationCode:'',
				isGenerate:0,
				cardPosterNew:{
					width: "750rpx",
					height: "1100rpx",
					background: "",
					views: [
						{
							type: "image",
							url: "https://lovebirdopen.com/static/img/poster/cardPosterNewBj1.png",
							css: {
								width: "750rpx",
								height: "1100rpx",
								left: "0rpx",
								top: "0rpx",
								mode: "center",
								radius: ''
							}
						},
						{
							type: "image",
							url: "https://lovebirdopen.com/static/img/poster/cardPosterNewBj2.png",
							css: {
								width: "640rpx",
								height: "826rpx",
								background:'transparent',
								left: "56rpx",
								top: "136rpx",
								mode: "center",
								radius: ''
							}
						},
						{//2用户头像
							type: "image",
							url: "",
							css: {
								width: "48rpx",
								height: "48rpx",
								left: "124rpx",
								top: "224rpx",
								mode: "center",
								radius: '50%'
							}
						},
						{//3用户名称
							type: 'text',
							text: '',
							css: {
								width: '440rpx',
								maxLines: 1,
								color: '#7B5D34',
								left: '188rpx',
								top: '224rpx',
								fontSize: '32rpx',
								lineHeight: '48rpx',
								textAlign: 'left'
							}
						},
						{//4酒卡
							type: "image",
							url: "",
							css: {
								width: "524rpx",
								height: "300rpx",
								background:'transparent',
								left: "114rpx",
								top: "300rpx",
								mode: "center",
								radius: ''
							}
						},
						{//5酒卡名称及类型
							type: 'text',
							text: '',
							css: {
								width: '295rpx',
								maxLines: 1,
								color: '',
								left: '154rpx',
								top: '340rpx',
								fontSize: '36rpx',
								lineHeight: '52rpx'
								// textAlign: 'center'
							}
						},
						{//6时间
							type: 'text',
							text: '',
							css: {
								width: '288rpx',
								maxLines: 1,
								color: '',
								left: '154rpx',
								top: '392rpx',
								fontSize: '24rpx',
								lineHeight: '40rpx'
								// textAlign: 'center'
							}
						},
						{//7商品名称
							type: 'text',
							text: '',
							css: {
								width: '320rpx',
								maxLines: 1,
								color: '',
								left: '154rpx',
								top: '488rpx',
								fontSize: '24rpx',
								lineHeight: '40rpx'
								// textAlign: 'center'
							}
						},
						{
							type: "image",
							url: "https://lovebirdopen.com/static/img/poster/cardPosterNewBj3.png",
							css: {
								width: "640rpx",
								height: "290rpx",
								background:'transparent',
								left: "56rpx",
								top: "674rpx",
								mode: "center"
							}
						},
						{//9小程序码
							type: "image",
							url: "",
							css: {
								width: "160rpx",
								height: "160rpx",
								left: "296rpx",
								top: "730rpx",
								mode: "center",
								radius: '50%'
							}
						},
						{
							type: "image",
							url: "https://lovebirdopen.com/static/img/poster/cd1.png",
							css: {
								width: "162rpx",
								height: "172rpx",
								background:'transparent',
								left: "20rpx",
								top: "112rpx",
								mode: "center"
							}
						},
						{
							type: "image",
							url: "https://lovebirdopen.com/static/img/poster/cd1.png",
							css: {
								width: "194rpx",
								height: "244rpx",
								background:'transparent',
								left: "558rpx",
								top: "808rpx",
								mode: "center"
							}
						}
					]
				},
				posterPath: '',
				// 酒卡的选择
				selectAll:false,
				ids:[],
				// 管理与否
				isManage:false,
			}
		},
		onLoad: function (option) {
			// 判断机型iPhone X的
			this.modelmes = uni.getStorageSync('modelmes');
			if (this.modelmes.search('iPhone X') != -1) {
			   this.isIphoneX = true;
			}
			this.getCardList();
		},
		methods:{
			getCardList(){
				this.apiget('/mall/liquor-card/index',{page:this.page,pageSize:this.pageSize,status:0,freezes:0}).then(res =>{
					if(res.data.status == 200 ) {
						var addList = res.data.data.list;
						addList.forEach(item => {
							item.checkS = false;
						})
						this.totalCount = res.data.data.totalCount;
						this.cardList = this.cardList.concat(addList);
						this.cardReady = 1;
						if(res.data.data.list.length<this.pageSize){
							this.isLoadMore = true;
							this.status = 'nomore';
						}else if(res.data.data.list.length==this.pageSize && this.page == res.data.data.pageCount){
							this.isLoadMore = true;
							this.status = 'nomore';
						}else{
							this.status = 'loading';
							this.page = ++ this.page;
						}
					}
				})
			},
			// 选择酒卡
			checkGo(index){
				if(this.cardList[index].checkS){
					var delIndex = this.ids.indexOf(this.cardList[index].id);
					this.ids.splice(delIndex,1);
					this.cardList[index].checkS = false;
					this.selectAll = false;
				}else{
					this.ids.push(this.cardList[index].id);
					this.cardList[index].checkS = true;
					if(this.ids.length==this.cardList.length){
						this.selectAll = true;
					}
				}
			},
			selectAllGo(){
				if(this.selectAll){
					this.cardList.forEach(item => {
						item.checkS = false;
					})
					this.ids = [];
					this.selectAll = false;
				}else{
					this.ids = [];
					this.cardList.forEach(item => {
						item.checkS = true;
						this.ids.push(item.id);
					})
					this.selectAll = true;
				}
			},
			// 管理
			manageGo(){
				this.isManage = !this.isManage;
				if(!this.isManage){
					this.cardList.forEach(item => {
						item.checkS = false;
					});
					this.selectAll = false;
				}
			},
			// 确认选择的酒卡
			okChoose(){
				var idVal = this.ids.join(",");
				this.apipost('/mall/storage-liquor/storage',{id:idVal}).then(res =>{
					if(res.data.status == 200 ) {
						uni.setStorage({
						    key: 'okChoose',
						    data: '1',
						    success: function () {
						        setTimeout(function (){
						        	uni.navigateBack({
						        	    delta: 1
						        	});
						        }, 1000);
						    }
						});
					}
				})
			},
			seeCardInfo(type,id){//type作为后续跳转酒卡还是我的酒卡的判断
				uni.navigateTo({
					url:"/pages/scanCode/liquorCardInfo?id="+id+"&type="+type
				})
			},
			goHome(){
				uni.reLaunch({
				    url: '/pages/index'
				});
			},
			getLogonUser() {
				this.apiget('/fun/member/view', {}).then(res => {
					if (res.data.status == 200) {
						this.cardPosterNew.views[2].url = res.data.data.avatar;
						this.cardPosterNew.views[3].text = '好友“'+res.data.data.nickname+'”送你一张酒卡';
						this.invitationCode = res.data.data.invitation_code;
						this.giveCard.invitationCode = res.data.data.invitation_code;
						this.$emit("giveCard",this.giveCard);
						// 获取小程序码
						this.gerWxCode();
					}
				})
			},
			gerWxCode(){
				var _this = this;
				this.apipost('/wxxcx/get-wx-code', {page:'pages/index',scene:'card='+this.giveCardVal+'&ref='+this.invitationCode,width:280,is_hyaline:1}).then(res => {
					if (res.data.status == 200) {
						this.cardPosterNew.views[9].url = res.data.data;
						this.isGenerate = 1;
					}
				})
			},
			// 取消分享
			cancelShare() {
				this.shareWayShow = false;
			},
			// 分享按钮
			shareGo(id,name,img,index) {
				this.cardPosterNew.views[4].url = (this.cardList[index].specs).indexOf('500')!=-1?'https://lovebirdopen.com/static/img/poster/cardPoster500.png':'https://lovebirdopen.com/static/img/poster/cardPoster125.png';
				this.cardPosterNew.views[5].text = this.cardList[index].liquor_cate.name+this.cardList[index].liquor_cate.description;
				this.cardPosterNew.views[5].css.color = (this.cardList[index].specs).indexOf('500')!=-1?'#EAC181':'#B97300';
				this.cardPosterNew.views[6].text = this.getdate(this.cardList[index].created_at,1);
				this.cardPosterNew.views[6].css.color = (this.cardList[index].specs).indexOf('500')!=-1?'rgba(234, 193, 129, 0.7)':'rgba(185, 115, 0, 0.7)';
				this.cardPosterNew.views[7].text = this.cardList[index].name;
				this.cardPosterNew.views[7].css.color = (this.cardList[index].specs).indexOf('500')!=-1?'rgba(234, 193, 129, 0.7)':'rgba(185, 115, 0, 0.7)';
				this.giveCardId = id;
				this.giveCardImg = img;
				this.giveCardName = name;
				this.giveCard.giveCardId = id;
				this.giveCard.giveCardImg = img;
				this.giveCard.giveCardName = name;
				this.apipost('/mall/liquor-card/update',{given_at:1,id:id}).then(res =>{
					if(res.data.status == 200 ) {
						this.giveCardVal = res.data.data.card;
						this.giveCard.giveCardVal = res.data.data.card;
						this.shareWayShow = true;
						this.getLogonUser();
					}
				})
			},
			// 生成海报
			generateGo() {
				this.showLoadGo(true);
				var _this = this;
				this.painterShow = true;
				this.shareWayShow = false;
				if(this.posterPath!=''){
					this.showLoadGo(false);
				}
			},
			savePoster() {
				var _this = this;
				uni.saveImageToPhotosAlbum({
					filePath: this.posterPath,
					success(res) {
						uni.showToast({
							title: '已保存到相册',
							icon: 'success',
							duration: 2000,
							success: function() {
								_this.painterShow = false
							}
						})
					}
				})
			},
		},
		onShareAppMessage(res) {
			var _this = this;
			return {
				title: _this.giveCardName,
				path: 'pages/index?card='+_this.giveCardVal+'&ref='+_this.invitationCode,
				imageUrl: _this.giveCardImg
			}
			_this.shareWayShow = false;
			if (res.from === 'button') { // 来自页面内分享按钮
				uni.showToast({
					title: '已发送',
					icon: 'success',
					duration: 2000,
					success: function() {}
				})
			}
		}
		
	}
</script>

<style lang="scss">
	.chooseWinecard{
		min-height: 100%;
		background: #F8F8FA;
		padding-left: 40rpx;
		padding-top: 40rpx;
	}
	.cardManage{
		margin-bottom: 16rpx;
		padding: 0 32rpx;
		font-size: 32rpx;
		line-height: 48rpx;
		color: #333333;
		
		text{
			margin-left: 10rpx;
			font-size: 24rpx;
			color: rgba(0, 0, 0, 0.56);
		}
		.fr{
			float: right;
		}
		.screenEd{
			color: #FF5238;
		}
	}
	
	.liquorCardList{
		padding-bottom: 200rpx;
		min-height: 95vh;
		// height: 1800rpx;
		background-color: #F8F8FA;
		overflow: hidden;
	}
	.liquorCardEach{
		position: relative;
		width: 750rpx;
		margin-bottom: 16rpx;
		overflow: hidden;
		
		.chooseBox{
			float: left;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 64rpx;
			height: 352rpx;
			
			.checkbox{
				width: 32rpx;
				height: 32rpx;
				line-height: 22rpx;
				text-align: center;
				background: #FFFFFF;
				border: 2rpx solid #FF5238;
				border-radius: 50%;
			}
		}
		
		.liquorCardEachCont2{
			position: relative;
			float: left;
			width: 686rpx;
			height: 352rpx;
			overflow: hidden;
			position: relative;
			z-index: 2;
		
			.liquorCardEachBj{
				position: absolute;
				top: 0;
				left: 0;
				z-index: 1;
				width: 686rpx;
				height: 352rpx;
				border-radius: 16rpx;
			}
			
			.bigBox{
				position: relative;
				z-index: 2;
				padding: 40rpx 40rpx 0;
				
				.worth{
					position: absolute;
					right: 0;
					top: 0;
					width: 356rpx;
					height: 57rpx;
					padding-left: 45rpx;
					font-size: 24rpx;
					line-height: 57rpx;
					text-align: center;
				}
				.worthColor1{
					color: #755F3C;
					
					text{
						margin-left: 8rpx;
						color: rgba(117, 95, 60, 0.7);
					}
				}
				.worthColor2{
					color: #FFE6A6;
					
					text{
						margin-left: 8rpx;
						color: rgba(255, 230, 166, 0.7);
					}
				}
				
				.cardTit{
					height: 52rpx;
					font-size: 36rpx;
					line-height: 52rpx;
				}
				.time{
					width: 70%;
					// margin-bottom: 56rpx;
					font-size: 24rpx;
					line-height: 40rpx;
				}
				.sTime{
					display: flex;
					
					.info{
						flex: 1;
						width: 1px;
					}
					text{
						margin-left: 8rpx;
						opacity: 1;
					}
				}
				.mb56{
					margin-bottom: 56rpx;
				}
				
				.cardHandle{
					margin-top: 42rpx;
					text-align: right;
					
					.handleEach{
						display: inline-block;
						height: 56rpx;
						line-height: 56rpx;
						font-size: 24rpx;
						text-align: center;
						
						.handleBox{
							display: flex;
							align-items: center;
							justify-content: center;
							
							image{
								display: inline-block;
								width: 32rpx;
								height: 32rpx;
								margin-right: 10rpx;
								vertical-align:middle
							}
						}
					}
					.handleEach11{
						width: 136rpx;
						border: 2rpx solid #755F3C;
						box-sizing: border-box;
						border-radius: 56rpx;
						color: #EAC181;
					}
					.handleEach12{
						width: 184rpx;
						margin-left: 32rpx;
						border-radius: 50rpx;
						background: #EAC181;
						color: #755F3C;
					}
					.handleEach21{
						width: 136rpx;
						border: 1px solid rgba(185, 115, 0, 0.7);
						box-sizing: border-box;
						border-radius: 56rpx;
						color: #B97300;
					}
					.handleEach22{
						width: 184rpx;
						margin-left: 32rpx;
						border-radius: 50rpx;
						background: #CC922D;
						color: #FFE6A6;
						border: 1px solid #FFE6A6;
					}
				}
				.color1{
					color: #EAC181;
				}
				.color2{
					color: #B97300;
				}
				.color3{
					color: rgba(234, 193, 129, 0.7);
				}
				.color4{
					color: rgba(185, 115, 0, 0.7);
				}
				
			}
			
		}
		
		.liquorCardEachCont{
			border-radius: 16rpx;
			overflow: hidden;
			position: relative;
			z-index: 2;
			
			.cardTit{
				padding: 24rpx 24rpx 18rpx;
				font-size: 36rpx;
				line-height: 52rpx;
				font-weight: 900;
				
				.lable{
					margin-left: 24rpx;
					font-size: 24rpx;
					font-style: normal;
				}
			}
			.cardTit1,.yellow{
				position: relative;
				color: #A6834D;
				
				.tit{
					background: linear-gradient(to right, #F4D6A7, #A6834D);
					-webkit-background-clip: text;
					color: transparent;
				}
			}
			
			.cardTit2,.red{
				color: #F52C00;
				
				.tit{
					background: linear-gradient(to right, #ED7729, #F52C00);
					-webkit-background-clip: text;
					color: transparent;
				}
			}
			.cardTit3,.grey{
				color: #47525E;
				
				.tit{
					background: linear-gradient(to right, #B1BCC9, #47525E);
					-webkit-background-clip: text;
					color: transparent;
				}
			}
			
			.cardCont{
				padding: 24rpx;
				display: flex;
				
				.niccImg {
					width:160rpx;
					height: 160rpx;
					margin-right: 16rpx;
					border-radius: 8rpx;
				}
				
				.cardInfo{
					flex: auto;
					line-height: 40rpx;
					
					.liquorTit{
						display: flex;
						font-size: 24rpx;
						color: #fff;
						
						.liquorTitleft{
							flex: auto;
							width: 1px;
						}
					}
					
					.liquorSpecsBox{
						display: flex;
						font-size: 24rpx;
						color: rgba(255, 255, 255, 0.7);
						
						.liquorSpecs{
							flex: auto;
						}
					}
					
					.cardTips{
						margin-top: 38rpx;
						font-size: 24rpx;
						color: rgba(255, 255, 255, 0.7);
						text-align: right;
					}
				}
			}
			
			.cardCont1,.cardContyellow{
				background: linear-gradient(90deg, rgba(255, 255, 255, 0.3) -1.6%, rgba(255, 255, 255, 0) 100%);
			}
			.cardCont2,.cardContred{
				background: linear-gradient(90deg, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0) 100%);
			}
			.cardCont3,.cardContgrey{
				background: linear-gradient(90deg, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0) 100%);
			}
			
			.cardHandle{
				padding: 20rpx 24rpx 26rpx;
				text-align: right;
				
				.handleEach{
					display: inline-block;
					height: 56rpx;
					line-height: 56rpx;
					font-size: 24rpx;
					text-align: center;
					
					.handleBox{
						display: flex;
						align-items: center;
						justify-content: center;
						
						image{
							display: inline-block;
							width: 32rpx;
							height: 32rpx;
							margin-right: 10rpx;
							vertical-align:middle
						}
					}
				}
				.handleEach1{
					width: 136rpx;
					border: 2rpx solid #fff;
					box-sizing: border-box;
					border-radius: 56rpx;
					color: #fff;
				}
				.handleEach2{
					width: 184rpx;
					margin-left: 16rpx;
					// background: #FF5238;
					border-radius: 50rpx;
					color: #FFF;
				}
				.handleEach21,.handleEachyellow{
					background: linear-gradient(96.27deg, #EAC181 6.37%, #A6834D 92.17%);
				}
				.handleEach22,.handleEachred{
					background: linear-gradient(96.27deg, #ED7729 6.37%, #F52C00 92.17%);
				}
				.handleEach23,.handleEachgrey{
					background: linear-gradient(96.27deg, #B1BCC9 6.37%, #47525E 92.17%);
				}
			}
		}
	}
	.liquorCardEach:after{
		content: '';
		height: 0;
		line-height: 0;
		display: block;
		visibility: hidden;
		clear: both;
	}
	.cardNo{
		padding-top: 100rpx;
		text-align: center;
		
		image{
			display: inline-block;
			width: 336rpx;
			height: 336rpx;
		}
		
		.tips{
			font-size: 28rpx;
			line-height: 44rpx;
		}
		
		.getCardBtn{
			display: inline-block;
			width: 208rpx;
			height: 80rpx;
			margin-top: 64rpx;
			font-size: 32rpx;
			line-height: 80rpx;
			color: #fff;
			background: #FF5238;
			box-shadow: 0px 4rpx 8rpx rgba(255, 82, 56, 0.18);
			border-radius: 58rpx;
		}
	}
	
	// 底部按钮
	.okChoose{
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 99;
		width: 100%;
		padding: 18rpx 32rpx 18rpx 48rpx;
		background-color: #fff;
		
		.selectAll{
			float: left;
			display: flex;
			height: 64rpx;
			align-items: center;
			font-size: 24rpx;
			color: rgba(0, 0, 0, 0.56);
			
			.allCheckbox{
				width: 40rpx;
				height: 40rpx;
				margin-right: 16rpx;
				text-align: center;
				border: 2rpx solid #FF5238;
				border-radius: 50%;
			}
			.allCheckboxEd{
				background-color: #FF5238;
			}
		}
		.okBtn{
			float: right;
			width: 184rpx;
			height: 64rpx;
			background: #FF5238;
			border-radius: 32px;
			font-size: 28rpx;
			line-height: 64rpx;
			color: #FFFFFF;
			text-align: center;
		}
	}
	//分享方式
	.shareWaysBox {
		padding: 64rpx 32rpx;
	
		.shareWays {
			display: flex;
			padding-bottom: 60rpx;
			text-align: center;
	
			.shareWaysEach {
				flex: 1;
	
				.shareFriendsBtn {
					border: none;
				}
	
				.shareWaysEachIcon {
					display: flex;
					align-items: center;
					justify-content: center;
					height: 112rpx;
					width: 112rpx;
					margin: 0 auto;
					background: #F7F7F7;
					border-radius: 8rpx;
				}
	
				.tit {
					margin-top: 16rpx;
					font-size: 24rpx;
					line-height: 40rpx;
					color: #999999;
				}
			}
		}
	
		.cancel {
			height: 96rpx;
			font-size: 32rpx;
			line-height: 96rpx;
			text-align: center;
			color: #333;
			background: #F7F7F7;
			border-radius: 48px;
		}
	}
	
	.goodsPainter {
		width: 460rpx;
		height: 900rpx;
		padding: 112rpx 0;
		margin: 0 auto;
		
		image{
			width: 460rpx;
			height: 674rpx;
		}
	}
	
	.painterCans {
		position: fixed;
		left: -800rpx;
		width: 640rpx;
		height: 1028rpx;
	}
	
	.savePainter {
		margin-top: 20rpx;
		padding: 0 32rpx 30rpx;
	
		.saveBtn {
			height: 96rpx;
			font-size: 32rpx;
			line-height: 96rpx;
			color: #fff;
			text-align: center;
			background: #FF5238;
			box-shadow: 0px 4rpx 8rpx rgba(255, 82, 56, 0.18);
			border-radius: 48rpx;
		}
	}
</style>
